﻿<%@ Register TagPrefix="oc" Namespace="Whidsoft.WebControls" Assembly="Whidsoft.WebControls.OrgChart" %>
<%@ Page language="c#" Codebehind="OrgChart.aspx.cs" AutoEventWireup="True" Inherits="OrgNodeDemo.WebForm1" %>

<HTML style="overflow:hidden">
	<HEAD>
		<title>Sơ đồ hội viên</title>
		<meta http-equiv="Content-Type" content="text/html; charset=gb2312">
		<LINK href="/Content/OrgChart.css" type="text/css" rel="stylesheet">

        <link href="/Content/themes/base/jquery.ui.core.css" rel="stylesheet"/>
        <link href="/Content/themes/base/jquery.ui.datepicker.css" rel="stylesheet"/>
        <link href="/Content/themes/base/jquery.ui.theme.css" rel="stylesheet"/>
        <link href="/Content/themes/base/jquery.ui.autocomplete.css" rel="stylesheet"/>

        <script src="/Scripts/jquery-2.1.1.js"></script>
        <script src="/Scripts/jquery-ui-1.11.1.js"></script>
        <script src="/Scripts/jquery-ui.unobtrusive-2.2.0.js"></script>

        <script type="text/javascript">
            Url = function () { }
            Url.prototype = {
                _relativeRoot: '<%= ResolveUrl("~/") %>',
                // create an extension method called "resolve"
                resolve: function (relative) {
                    var resolved = relative;

                    if (relative.charAt(0) == '~')
                        resolved = this._relativeRoot + relative.substring(2);

                    return resolved;
                }
            }
            $Url = new Url();

            var url = $Url.resolve("~/Customer/SubCustomerSearch");

            $(document).ready(function () {
                $('#txtUserName').autocomplete(
                {
                    source: '/Chart/SubCustomerSearch'
                }
                );

                /*
                $("#txtUserName").autocomplete({
                    source: function (request, response) {
                        $.ajax({
                            type: "POST",
                            contentType: "application/json; charset=utf-8",
                            url: "/Commission2/Chart/SubCustomerSearch",
                            data: "{'term':'" + 'HH' + "'}",
                            dataType: "json",
                            success: function (data) {
                                response(data.d);
                            },
                            error: function (result) {
                                alert("Error");
                            }
                        });
                    }
                });
                */
            })
        </script>

        <style>
            .webform-control {
                width: 200px;
                height: 31px;
                font-size: 14px;
                line-height: 1.42857143;
                color: #555;
                padding-left : 3px;
                background-color: #fff;
                background-image: none;
                border: 1px solid #ccc;
                border-radius: 4px;
                -webkit-box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                box-shadow: inset 0 1px 1px rgba(0, 0, 0, .075);
                -webkit-transition: border-color ease-in-out .15s, -webkit-box-shadow ease-in-out .15s;
                -o-transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
                transition: border-color ease-in-out .15s, box-shadow ease-in-out .15s;
            }

            .btn-default {
                display: inline-block;
                padding: 6px 12px;
                height:31px;
                margin-bottom: 0;
                font-size: 14px;
                font-weight: normal;
                line-height: 1.42857143;
                text-align: center;
                white-space: nowrap;
                vertical-align: middle;
                cursor: pointer;
                -webkit-user-select: none;
                -moz-user-select: none;
                -ms-user-select: none;
                user-select: none;
                background-image: none;
                border: 1px solid transparent;
                border-radius: 4px;
                color: #333;
                background-color: #fff;
                border-color: #ccc;
            }
        </style>
	</HEAD>

	<body bgColor="#d9e7f5" MS_POSITIONING="GridLayout">

		<form id="Form1" method="post" runat="server">

		<TABLE cellSpacing="0" cellPadding="0" border="0">
			<TR vAlign="top">
				<TD width="10" height="15"></TD>
				<TD >
                    <a href="Home" >Trang chính</a> | <a href="?style=1" >Theo chiều dọc</a> | <a href="?style=0" >Theo chiều ngang</a>
                </TD>
			</TR>
		</TABLE>

        <hr />
            <table>
                <tr>
                    <td style="width:auto; height:auto; vertical-align:middle">
                        <asp:Label runat="server">Hội viên : </asp:Label>
                        <asp:TextBox ID="txtUserName" class="webform-control" runat="server"></asp:TextBox>
                    </td>
                    <td style="width:60px; height:auto; vertical-align:middle">
                        <asp:Label runat="server">Level : </asp:Label>
                    </td>
                    <td style="height:auto; vertical-align:middle">
                        <asp:TextBox ID="txtLevel" class="webform-control" 
                            MaxLength="3" Width="50" runat="server"></asp:TextBox>
                    </td>
                    <td>
                        <asp:Button Text="Search" runat="server" class="btn-default" />
                    </td>
                </tr>
            
            </table>
        <hr />

        <oc:orgchart id="OrgChart1" 
            style="Z-INDEX: 101; LEFT: 104px; TOP: 48px"
			runat="server"
            Width="664px" Height="184px" ChartStyle="Vertical" ToolTip="S&#417; &#273;&#7891;"
			Font-Names="Arial">
		</oc:orgchart>

		</form>
	</body>
</HTML>
